<template>
    <div>
        <el-button type="primary" plain @click="Eject.dialogFormVisible = true">
            新增
        </el-button>
      
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="itemNumber" label="BOM编号" />
            <el-table-column prop="bomTheme" label="BOM主题" />
            <el-table-column prop="bomDefault" label="默认BOM" />
            <el-table-column prop="bomVersion" label="版本" />
            <el-table-column prop="bomType" label="成品类型" />
            <el-table-column prop="bomName" label="成品名称" />
            <el-table-column prop="dayNum" label="日产量" />
            <el-table-column prop="bomNote" label="备注" />
            <el-table-column prop="wIds" label="BOM配件" />
            <el-table-column prop="processFlowCode" label="工艺流程" />
            <el-table-column prop="attachment" label="附件" />
            <el-table-column label="附件" #default="scope">
                <el-button type="success" plain @click="xiu(scope.row)">
            修改
        </el-button>
        <el-button type="success" plain @click="chakan(scope.row.bomId)">
            查看
        </el-button>
                </el-table-column>
        </el-table>
        <tr>
            <td>
                <el-dialog
            v-model="Eject.dialogFormVisible"
            title="新增BOM信息"
            width="500px"
            :before-close="handleClose"
        >
        <span>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <div class="form-row">
          <el-form-item label="BOM编号:" :label-width="Eject.formLabelWidth">
            <el-input
              v-model="ruleForm.itemNumber"
              autocomplete="off"
              style="width: 180px; height: 30px"
              :readonly="ruleForm.autoGenerate"
              clearable
              @click.native="handleCodeClick"
            />
            <template #prepend>MO</template>
            <el-switch
              width="40"
              v-model="ruleForm.autoGenerate"
              active-text="自动生成"
              active-color="#67C23A"
              @change="handleSwitchChange"
            />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
           
            
          <el-form-item label="BOM主题" prop="bomTheme" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForm.bomTheme" />
          </el-form-item>
          <el-form-item label="默认BOM" prop="resource">
    <el-radio-group v-model="ruleForm.bomDefault">
      <el-radio label="是"></el-radio>
      <el-radio label="否"></el-radio>
    </el-radio-group>
  </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
            <el-form-item label="版本" prop="bomVersion" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForm.bomVersion" />
          </el-form-item>
          <el-form-item label="成品类型" prop="bomType" style="flex: 1;">
            <el-select v-model="ruleForm.bomType" placeholder="请选择">
              <el-option label="超能胶水" value="超能胶水" />
              <el-option label="万能胶水" value="万能胶水" />
            </el-select>
          </el-form-item>
          <el-form-item label="成品名称" prop="bomName" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForm.bomName" />
          </el-form-item>

        </div>
     
        <div class="form-row" style="display: flex; justify-content: space-between;">
         
          <el-form-item label="日产量" prop="dayNum" style="flex: 1;">
            <el-input v-model="ruleForm.dayNum" />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="备注" prop="bomNote" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForm.bomNote" />
          </el-form-item>
          <el-form-item label="BOM配件" prop="wIds" style="flex: 1;">
            <el-input v-model="ruleForm.wIds" />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="工艺流程" prop="processFlowCode" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForm.processFlowCode" />
          </el-form-item>
          <el-form-item label="附件" prop="attachment" style="flex: 1;">
            <el-input v-model="ruleForm.attachment" />
          </el-form-item>
        </div>
       
        <el-form-item>
          <el-button type="primary" @click="submitForm()">
            添加
          </el-button>
          <el-button @click="handleClose()">关闭</el-button>
        </el-form-item>

      </el-form>
     <td>
      
     </td>
    </span>

      
        </el-dialog>
            </td>

            <td>
                <el-dialog
            v-model="Eject.edialogFormVisible"
            title="修改BOM信息"
            width="500px"
            :before-close="handleClose"
            style="width: 1000px;"
        >
        <span>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <div class="form-row">
          <el-form-item label="BOM编号:" :label-width="Eject.formLabelWidth">
            <el-input
              v-model="ruleForm.itemNumber"
              autocomplete="off"
              style="width: 180px; height: 30px"
              :readonly="ruleForm.autoGenerate"
              clearable
              @click.native="handleCodeClick"
            />
            <template #prepend>MO</template>
            <el-switch
              width="40"
              v-model="ruleForm.autoGenerate"
              active-text="自动生成"
              active-color="#67C23A"
              @change="handleSwitchChange"
            />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
           
            
          <el-form-item label="BOM主题" prop="bomTheme" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForm.bomTheme" />
          </el-form-item>
          <el-form-item label="默认BOM" prop="resource">
    <el-radio-group v-model="ruleForm.bomDefault">
      <el-radio label="是"></el-radio>
      <el-radio label="否"></el-radio>
    </el-radio-group>
  </el-form-item>
        
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
            <el-form-item label="版本" prop="bomVersion" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForm.bomVersion" />
          </el-form-item>
          <el-form-item label="成品类型" prop="bomType" style="flex: 1;">
            <el-select v-model="ruleForm.bomType" placeholder="请选择">
              <el-option label="超能胶水" value="超能胶水" />
              <el-option label="万能胶水" value="万能胶水" />
            </el-select>
          </el-form-item>
          <el-form-item label="成品名称" prop="bomName" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForm.bomName" />
          </el-form-item>

        </div>
     
        <div class="form-row" style="display: flex; justify-content: space-between;">
         
          <el-form-item label="日产量" prop="dayNum" style="flex: 1;">
            <el-input v-model="ruleForm.dayNum" />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="备注" prop="bomNote" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForm.bomNote" />
          </el-form-item>
          <el-form-item label="BOM配件" prop="wIds" style="flex: 1;">
            <el-input v-model="ruleForm.wIds" />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="工艺流程" prop="processFlowCode" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForm.processFlowCode" />
          </el-form-item>
          <el-form-item label="附件" prop="attachment" style="flex: 1;">
            <el-input v-model="ruleForm.attachment" />
          </el-form-item>
        </div>
       
        <el-form-item>
          <el-button type="primary" @click="update()">
            修改
          </el-button>
          <el-button @click="handleClose()">关闭</el-button>
        </el-form-item>
      </el-form>
    </span>
<td>
    <el-table  :data="tableDatap" highlight-current-row border >
       <el-table-column type="index" width="40" />
       <el-table-column prop="processCode" label="工序编码" width="150" />
       <el-table-column prop="processName" label="工序名称" width="150" />
       <el-table-column prop="isEnabled" label="是否启用" width="150" />
       <el-table-column prop="remarks" label="备注" width="150" />
       
       </el-table>
</td>
      
        </el-dialog>
            </td>
            <!-- 工艺流程 -->

            <td>
            <!-- 分页 -->


          <el-pagination
      v-model:current-page="pp.index"
      v-model:page-size="pp.size"
      :page-sizes="[5, 20, 30, 40]"
     
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pp.totalCount"
      @size-change=" Show()"
      @current-change="Show()"
    />
        </td>
        </tr>
    
    </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { ElMessage } from "element-plus";
import { onMounted, reactive, ref, watch } from "vue";
import {useRouter} from 'vue-router'
const router=useRouter();
const tableData = ref([]);
const processList=ref([]);
const ruleFormRef = ref<InstanceType<typeof import('element-plus')['ElForm']>>();
const formSize = ref('default');

const apiUrl = import.meta.env.VITE_APP_API_URL;

onMounted(() => {
    Show();
    
});
const pp=reactive({
  index:1,
  size:5,
  totalCount:0,
  totalPage:0
})
const Show =  () => {
    axios({
        url:apiUrl+"/T5/BOMguan/GetBOMguan",
        method:'get',
        params:pp
      
    }).then((res)=>{
        tableData.value = res.data.data;
        pp.totalCount=res.data.totalCount;
        pp.totalPage=res.data.totalPage;
        getProcessList();
    })
   
};


const p=reactive({
  pageIndex:1,
  pageSize:5,
  totalCount:0,
  totalPage:0
})
const getProcessList = () => {
   
    axios
      .get(apiUrl+"/T5/Process/GetProcess",{params:p})
      .then((res: any) => {
        processList.value = res.data.data;
        console.log(res.data.data, "工序流程-工单信息:详情6767");
        p.totalCount=res.data.totalCount;
        p.totalPage=res.data.totalPage;
     
  
      });
  };
  

const ruleForm = reactive({
    bomId: 0,
    itemNumber: "",
    bomTheme: "",
    bomDefault: "",
    bomVersion: "",
    bomType: "",
    bomName: "",
    dayNum: "",
    bomNote: "",
    wIds: "",
    processFlowCode: "",
    attachment: "",
    isDeleted: false,
    autoGenerate: false, // 是否自动生成
});

const Eject = reactive({
    dialogFormVisible: false,
    formLabelWidth: "100px",
    title: "",
    Isture: true,
    dialogVisible: false,
    edialogFormVisible:false,
    gongdialogFormVisible:false,
});

const generateCode = () => {
    const timestamp = Date.now(); // 获取精确到毫秒的时间戳
    ruleForm.itemNumber = `CS${timestamp}`;
};

const handleSwitchChange = (val: boolean) => {
    ruleForm.autoGenerate = val;
    if (val) {
        generateCode(); // 开启自动生成时立即生成
    } else {
        ruleForm.itemNumber = ""; // 关闭时清空编号
    }
};

const handleCodeClick = () => {
    if (ruleForm.autoGenerate) {
        generateCode(); // 点击输入框时重新生成
    }
};

const submitForm = async () => {
    ruleFormRef.value?.validate(async (valid) => {
        if (valid) {
            try {
                const res = await axios.post(apiUrl+"/T6/BOMguan/AddBOMguans", ruleForm);
                if (res.data.code === 100) {
                    ElMessage.success("添加成功");
                    Eject.dialogFormVisible = false;
                    Show(); // 刷新表格数据
                   
                }
            } catch (err) {
                console.log(err);
                ElMessage.error("添加失败");
            }
        } else {
            ElMessage.error("请完善表单信息");
        }
    });
};

const handleClose = () => {
    
    Eject.dialogFormVisible = false;
    Eject.edialogFormVisible = false;
    Eject.gongdialogFormVisible=false;
    // Object.keys(ruleForm).forEach(key => {
    //     if (key!== 'bomId' && key!== 'isDeleted' && key!== 'autoGenerate') {
    //         ruleForm[key as keyof typeof ruleForm] = "";
    //     }
    // });
};



const xiu=(row:any)=>{
    Eject.edialogFormVisible=true;
    getProduct();
    ruleForm.bomId=row.bomId;
    ruleForm.itemNumber=row.itemNumber;
    ruleForm.bomTheme=row.bomTheme;
    ruleForm.bomDefault=row.bomDefault;
    ruleForm.bomVersion=row.bomVersion;
    ruleForm.bomType=row.bomType;
    ruleForm.bomName=row.bomName;
    ruleForm.dayNum=row.dayNum;
    ruleForm.bomNote=row.bomNote;
    ruleForm.wIds=row.wIds;
    ruleForm.processFlowCode=row.processFlowCode;
    ruleForm.attachment=row.attachment;
}

const update =  () => {
  axios({
    url:apiUrl+"/T6/BOMguan/UpdateOMguans",
    method:'put',
    data:ruleForm
  })
  .then((res)=>{
    if(res.data.code==206)
    {
        ElMessage.success("修改成功");
        Show();
        Eject.edialogFormVisible=false;
    }
  })
};
// 物品列表显示
const formp = reactive({
 totalCount: 0,
 totalPage: 0,
size: 15,
 index: 1,

});
const tableDatap =ref([]);const tableDatap1 =ref([]);
const getProduct = () => {
 
   axios({
   url: apiUrl+"/T6/Setting/ProcessingoShow",
   method: 'get',
   params: formp
 }).then((res) => {
   tableDatap.value = res.data.data;
   console.log(tableData.value);
   formp.totalCount = res.data.totalCount;
   formp.totalPage = res.data.totalPage;
 })
}


const chakan = (bomId:any ) => {
  // 使用命名路由和 params 对象传递参数
  router.push({ 
    path:"/A",
    query: { bomId: bomId }
   })
  // 或者使用路径方式
  
}
</script>

<style scoped>
.form-row {
    margin-bottom: 10px;
}
</style>    